<template>
	<div class="view">
		<!-- 头部 -->
		<div class="header">
			<div class="h_exit" style="cursor: pointer;" @click="to_exit">
				<i class="i-16 i-exit i-mr-10"></i>返回上一页
			</div>
			<div class="h_con">
				<div class="toggle_ul">
					<div class="toggle_li" :class="{'active':li_num==1}" @mouseenter="enter(1)" @mouseleave="leave" @click="li_click(1,'/web_configure')">网站配置</div>
					<div class="toggle_li" :class="{'active':li_num==2}" @mouseenter="enter(2)" @mouseleave="leave" @click="li_click(2,'/backstage')">后台配置</div>
					<!-- <div class="toggle_li" :class="{'active':li_num==3}" @mouseenter="enter(3)" @mouseleave="leave" @click="li_click(3,'/desc')">其他配置</div> -->
					<div class="li_bottom" :style="{left:left+'px'}"></div>
				</div>
			</div>
		</div>
		<!-- 头部 end -->
		
		<!-- 主体部分 -->
		<div class="main">
			<div class="main_con" :style="{height:con_height+'px'}">
				<router-view @toNum="toNum"></router-view>
			</div>
		</div>
		<!-- 主体部分 end -->
		
		<!-- 尾部 -->
		<template>
			<Footer></Footer>
		</template>
		<!-- 尾部 end -->
	</div>
</template>

<script>
	import Footer from "../../components/footer.vue"
	export default{
		data(){
			return{
				con_height:document.documentElement.clientHeight-147,
				left:0,
				li_num:1,
				name:this.$root.ptName,
				picdir:this.$root.ptPicdir,
			}
		},
		created(){
			let that = this
			setTimeout(function(){
				that.mealList = that.$root.mealList
			},300)
		},
		components:{
			Footer
		},
		methods:{
			
			toNum(val){
				this.li_num = val
				if(val==1){
					this.left = 0
				}else{
					this.left = (val-1)*100
				}
			},
			
			to_exit(){
				this.$router.push('/index')
			},
			enter(num){
				if(num==1){
					this.left = 0
				}else{
					this.left = (num-1)*100
				}
			},
			leave(){
				if(this.li_num==1){
					this.left = 0
				}else{
					this.left = (this.li_num-1)*100
				}
			},
			li_click(num,url){
				this.li_num = num
				this.$router.push(url)
			}
		}
	}
</script>

<style scoped>
	@import url("../../assets/css/configure.css");
	.header{
		background-color: #fff;
	}
	.h_user{
		cursor: pointer;
	}
</style>
